<template>
  <border
    class="park-service-system"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <bar-line ref="barLine"
                :title="barLineConfig.title"
                :axis="barLineConfig.axis"
                :xAxis="barLineConfig.xAxis"
                :yAxis="barLineConfig.yAxis"
                :dataZoom="barLineConfig.dataZoom"
                :grid="barLineConfig.grid"
                :config="barLineConfig.config"
                :tooltipsConfig="barLineConfig.tooltipsConfig"
                :seriesData="barLineConfig.seriesData"></bar-line>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import BarLine from './../components/BarLine.vue'
export default {
  name: 'industryDistribution',
  components: {
    Border,
    BarLine
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '行业分布',
        goPageUrl: ''
      },
      barLineConfig: {
        title: {
        },
        axis: {
          xAxisNameLength: 4,
          xAxisNameLengthSymbol: ''
        },
        dataZoom: {
          show: true,
          right: 10,
          endValue: 4
        },
        grid: {
          top: 40,
          bottom: 0
        },
        config: {
          barWidth: 20
        },
        xAxis: {
          axisLabel: {
            interval: 0
          },
          data: []
        },
        yAxis: {
        },
        tooltipsConfig: {
          tipsColor: ['#2e92cb']
        },
        seriesData: []
      },
      apiData: {},
      refreshInterval: 0
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.parkApi.ratio({ organId: this.organId, chartLabel: '3' }).then(res => {
          if (res.data.code === '0') {
            this.apiData = res.data.data
          } else {
            this.apiData = {}
            this.$parent.showTips('请求失败，点击确认继续刷新')
          }
          if (!isRefresh) {
            this.handleData()
          }
        }, res => {
          this.apiData = {}
          if (!isRefresh) {
            this.handleData()
          }
          this.$parent.showTips('请求失败，点击确认继续刷新')
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.apiData
      let dataZoomLength = window.screen.width > 1890 ? 6 : 4
      let seriesData = []
      let xData = []
      if (JSON.stringify(data) !== '{}') {
        data.list.forEach(item => {
          xData.push(item.name)
          seriesData.push(parseInt(item.value))
        })
      }
      if (xData.length > dataZoomLength) {
        this.barLineConfig.dataZoom.show = true
      } else {
        this.barLineConfig.dataZoom.show = false
      }
      this.barLineConfig.xAxis.data = xData
      this.barLineConfig.yAxis.max = seriesData[0]
      this.barLineConfig.seriesData = [{
        data: seriesData,
        name: '',
        colorIndex: 0,
        isBar: true
      }]
    },
    resizeChart () {
      this.$refs.barLine.resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.industryDistributionTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.industryDistributionTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.industryDistributionTimer)
  }
}
</script>
<style lang="scss" scoped>
.park-service-system {
  .module-content {
    width: 100%;
    height: calc(100% - 10px);
  }
}
@media screen and (min-width: 1890px) {

}
</style>
